﻿@{
    Layout = null;
    ViewData["Title"] = "ThreeInstit";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />

<h1>III级机构设置ThreeInstit</h1>

<div id="app">
    <el-row>
        <el-col :span="2"><el-button type="success" v-on:click="addkind">新增</el-button></el-col>
    </el-row>
    <el-table :data="tableData"
              style="width: 100%">
        <el-table-column prop="first_kind_name"
                         label="I级机构名称"
                         width="160">
        </el-table-column>
        <el-table-column prop="second_kind_name"
                         label="II级机构名称"
                         width="160">
        </el-table-column>
        <el-table-column prop="third_kind_id"
                         label="III级机构编号"
                         width="160">
        </el-table-column>
        <el-table-column prop="third_kind_name"
                         label="III级机构名称"
                         width="180">
        </el-table-column>
        <el-table-column prop="third_kind_sale_id"
                         label="销售责任人编号"
                         width="190">
        </el-table-column>
        <el-table-column prop="third_kind_is_retail"
                         label="是否为零售店"
                         width="130">
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button size="mini"
                           v-on:click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini"
                           type="danger"
                           v-on:click="handleDelete(scope.row.ftk_id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    @*新增模态框*@
    <el-dialog title="新增I级机构"
               :visible.sync="AdialogVisible"
               width="55%">
        @* <el-row :gutter="20">
        <el-col :span="18">*@
        <el-form ref="form" :model="third_kind" label-width="150px">
            <el-form-item label="I&II级机构">
                <el-cascader v-model="selectedKeys"
                             :options="options"
                             :props="cascaderProps"
                             v-on:change="handleChange"
                             ref="casc"></el-cascader>

            </el-form-item>
            <el-form-item label="III级机构编号">
                <el-input v-model="third_kind.third_kind_id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="III级机构名称">
                <el-input v-model="third_kind.third_kind_name"></el-input>
            </el-form-item>
            <el-form-item label="销售责任人编号">
                <el-input type="textarea" v-model="third_kind.third_kind_sale_id"></el-input>
            </el-form-item>
            <el-form-item label="是否为零售店">
                <el-radio v-model="third_kind.third_kind_is_retail" label="是">是</el-radio>
                <el-radio v-model="third_kind.third_kind_is_retail" label="否">否</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button v-on:click="AdialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSubmitAdd">确 定</el-button>
            </el-form-item>
        </el-form>
        @*  </el-col>
        </el-row>*@

    </el-dialog>
    @*修改模态框*@
    <el-dialog title="修改I级机构"
               :visible.sync="UdialogVisible"
               width="55%">
        <el-form ref="form" :model="third_kind" label-width="150px">
            <el-form-item label="I&II级机构">
                <el-cascader v-model="selectedKeys"
                             :options="options"
                             :props="cascaderProps"
                             v-on:change="handleChange"
                             ref="casc" :key="modalKey"></el-cascader>

            </el-form-item>
            <el-form-item label="III级机构编号">
                <el-input v-model="third_kind.third_kind_id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="III级机构名称">
                <el-input v-model="third_kind.third_kind_name"></el-input>
            </el-form-item>
            <el-form-item label="销售责任人编号">
                <el-input type="textarea" v-model="third_kind.third_kind_sale_id"></el-input>
            </el-form-item>
            <el-form-item label="是否为零售店">
                <el-radio v-model="third_kind.third_kind_is_retail" label="是">是</el-radio>
                <el-radio v-model="third_kind.third_kind_is_retail" label="否">否</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button v-on:click="UdialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSubmitUdp">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //联级选择器数据源集合
            options: [],
            cascaderProps: {
                value: "id",
                label: "name",
                children: "children"
            },
            modalKey: 0,
            // 选中的父级分类的Id数组
            selectedKeys: [],
            //集合
            tableData: [],
            //实体类
            third_kind: {
                ftk_id: '',
                first_kind_id: '',
                first_kind_name: '',
                second_kind_id: '',
                second_kind_name: '',
                third_kind_id: '',
                third_kind_name: '',
                third_kind_sale_id: '',
                third_kind_is_retail: '',
            },
            //模态框开启标记
            AdialogVisible: false,
            UdialogVisible: false,
        },
        methods: {
            //刷新
            fill() {
                axios.get('/ConfigFile/ThreeInstitFill').then((res) => {
                    this.tableData = res.data.tabs;
                });
            },
            //联级机构列表框赋值方法
            cascaderSeleData() {
                axios.get('/ConfigFile/CascaderSele').then(res => {
                    console.info("res:",res.data);
                    this.options = res.data;
                })
            },
            //联级机构列表值改变事件
            handleChange() {
                //判断是否有选择菜单
                if (this.selectedKeys.length > 0) {
                    console.info(this.selectedKeys);
                    console.log(this.$refs['casc'].getCheckedNodes()[0].pathLabels);
                }
            },
            //打开新增模态框
            addkind() {
                //查询一二级联级机构
                this.cascaderSeleData();
                this.AdialogVisible = true;
            },
            //提交新增
            onSubmitAdd() {
                axios.post('/ConfigFile/AddThirdKind', {
                    first_kind_id: this.selectedKeys[0], first_kind_name: this.$refs['casc'].getCheckedNodes()[0].pathLabels[0],
                    second_kind_id: this.selectedKeys[1], second_kind_name: this.$refs['casc'].getCheckedNodes()[0].pathLabels[1],
                    third_kind_name: this.third_kind.third_kind_name, third_kind_sale_id: this.third_kind.third_kind_sale_id,
                    third_kind_is_retail: this.third_kind.third_kind_is_retail
                }).then(res => {
                    this.resultInform(res.data, "新增");
                    this.AdialogVisible = false;
                });
            },
            //修改编辑按钮，打开修改模态框
            handleEdit(row) {
                //文本框的赋值回显
                this.third_kind = row;
                //查询联级选择器集合
                this.cascaderSeleData();
                //联级选择框值回显
                this.selectedKeys[0] = row.first_kind_id;
                this.selectedKeys[1] = row.second_kind_id;
                this.modalKey++;
                this.UdialogVisible = true;
            },
            //提交修改
            onSubmitUdp() {
                axios.post('/ConfigFile/UdpThirdKind', {
                    ftk_id: this.third_kind.ftk_id,
                    first_kind_id: this.selectedKeys[0], first_kind_name: this.$refs['casc'].getCheckedNodes()[0].pathLabels[0],
                    second_kind_id: this.selectedKeys[1], second_kind_name: this.$refs['casc'].getCheckedNodes()[0].pathLabels[1],
                    third_kind_id: this.third_kind.third_kind_id, third_kind_name: this.third_kind.third_kind_name,
                    third_kind_sale_id: this.third_kind.third_kind_sale_id,
                    third_kind_is_retail: this.third_kind.third_kind_is_retail,
                }).then(res => {
                    this.resultInform(res.data, "修改");
                    this.UdialogVisible = false;
                })
            },
            //删除按钮
            handleDelete(id) {
                this.$confirm("确定要删除该III级机构信息吗？", "温馨提示").then(() => {
                    axios.delete('/ConfigFile/DelThirdKind?ftk_id=' + id).then((res) => {
                        this.resultInform(res.data, "删除");
                    })
                }).catch((error) => {
                    console.info("取消删除！" + error);
                })
            },
            //结果通知方法
            resultInform(res, oper) {
                if (res > 0) {
                    this.openmessuc("III级机构" + oper + "成功！");
                    this.fill();
                } else {
                    this.openmeswar("III级机构" + oper + "有误！");
                }
            },
            //成功弹窗
            openmessuc: function(mes) {
                this.$message({
                    message: mes,
                    type: 'success'
                });
            },
            //警告弹窗
            openmeswar: function(mes) {
                this.$message({
                    message: mes,
                    type: 'danger'
                });
            },
        },
        mounted: function() {
            this.fill();
        }
    });
</script>
